<template>
  <section class="dailyContent">
    <daily-classify :back="back" @getNum="getNum"/>
    <daily-content-son :label="label" :sonNum="sonNum" :content="content"/>
  </section>
</template>

<script>
import DailyClassify from './components/Classify'
import DailyContentSon from './components/Content'
export default {
  name: 'DailyContent',
  components: {
    DailyClassify,
    DailyContentSon
  },
  data () {
    return {
      back: '',
      label: '',
      content: [],
      sonNum: 0
    }
  },
  created () {
    this.getDailyData(this.$route.params.id)
  },
  methods: {
    async getDailyData (id) {
      const result = await this.axios.get('/homeDailyList/' + id)
      // console.log(result)
      for (let i in result) {
        this.back = result.backImage
        this.label = result.label
        this.content = result[i]
        // console.log(result[i])
        return
      }
    },
    getNum (id) {
      console.log('子元素传给我的' + id)
      this.sonNum = id
    },
    getDaily (id) {
      this.axios.get('/homeDailyList/' + id)
        .then((res) => {
          // console.log(res)
          for (let i in res) {
            this.back = res.backImage
            this.label = res.label
            this.content = res[i]
            return
          }
        })
    }
  },
  watch: {
    sonNum () {
      if (this.sonNum > -1) {
        this.$nextTick(() => {
          this.getDaily(this.sonNum)
        })
      }
    }
  }
}
</script>

<style lang="stylus" scoped>

</style>
